<template>
	<div class="brand-item">
		<div class="info-wrapper clearfix">
			<img class="brand-icon" :src="brand.logo" />
			<h5 class="brand-name">{{brand.name}}</h5>
			<p class="brand-region">匹配地区：{{brand.region}}</p>
		</div>
		<div class="brand-item-toolbar">
			<el-button type="primary" icon="el-icon-edit" circle size="mini" title="编辑" @click="linkToEdit"></el-button>
			<el-button class="mr-20" type="info" icon="el-icon-info" circle size="mini" title="查看详情" @click="showDetail"></el-button>
			<el-switch v-model="brand.disable" @change="switchDisEna" active-text="禁用" inactive-text="启用"></el-switch>
		</div>
	</div>
</template>

<script>
import { brandDisable, brandEnable } from "@/api/brand";

export default {
	name: "BrandItem",
	props: ["brand"],
	data() {
		return {};
	},
	methods: {
		linkToEdit() {
			this.$router.push({ name: "editBrand", params: { id: this.brand.id } });
		},
		showDetail() {
			this.$router.push({ name: "brandDetail", params: { id: this.brand.id } });
		},
		async switchDisEna(disable) {
			const method = disable ?  brandDisable : brandEnable;
			try {
				const result = await method(this.brand.id);
			} catch (err) {
				brand.disable = !brand.disable;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.brand-item {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	border: 1px solid rgba(233, 233, 233, 1);
	border-radius: 2px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.149019607843137);

	.info-wrapper {
		flex: 1;
	}

	.brand-icon {
		float: left;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin: 20px;
	}

	.brand-name {
		margin-top: 20px;
		line-height: 24px;
		font-size: 16px;
		color: rgba(0, 0, 0, 0.847);
	}

	.brand-region {
		margin-top: 20px;
		color: rgba(0, 0, 0, 0.447);
		font-size: 14px;
	}

	.brand-item-toolbar {
		height: 50px;
		padding-right: 20px;
		line-height: 50px;
		text-align: right;
		border-top: 1px solid #ddd;
		background-color: #f7f9fa;
	}
}
</style>